<template id="about">
  <div style="text-align: center">
    <h1>专业目录</h1>
    <div class="div">
      <div style="">
        <div style="width: 200px;float: left;">
          <el-tree ref="tree" :data="data2" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </div>
        <div style="float: left;width: 800px">
          <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="year" label="年份" width="150">
            </el-table-column>
            <el-table-column prop="title" label="档案名" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作">
              <template scope="scope">
                <el-button
                  size="small"
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row)">查看</el-button>
                <el-button
                  size="small"
                  type="success"
                  @click="handleDelete(scope.$index, scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--<div style="margin-top: 20px">-->
            <!--<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>-->
            <!--<el-button @click="toggleSelection()">取消选择</el-button>-->
          <!--</div>-->

          <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage1" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="50">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>

  </div>

</template>

<script>

  export default {
    data: function () {
      return {
        data2: []
        , defaultProps: {
          children: 'children',
          label: 'label'
        },
        tableData: [],
        //下拉菜单选项
        select: '',

        //默认每页数据量
        pagesize: 10,

        //默认高亮行数据id
        highlightId: -1,

        //当前页码
        currentPage: 1,

        //查询的页码
        start: 1,

        //默认数据总数
        totalCount: 50,

        multipleSelection: [],
        currentPage1: 1,
        currentPage2: 2,
        currentPage3: 3,
        currentPage4: 4
      }

    },
    mounted:function () {
      this.axios.get("http://localhost:8070/getallzy")
        .then(response => {
          this.data2 = response.data
        })
    },
    methods: {
      //从服务器读取数据

      loadData: function(criteria, pageNum, pageSize){
        this.$http.get(this.url,{parameter:criteria, pageNum:pageNum, pageSize:pageSize}).then(function(res){
          this.tableData = res.data.studentdata;
          this.totalCount = res.data.number;
        },function(){
          console.log('failed');
        });
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      //每页显示数据量变更
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.loadData( this.currentPage, this.pagesize);
      },
      //页码变更
      handleCurrentChange: function(val) {
        this.currentPage = val;
        this.loadData(this.criteria, this.currentPage, this.pagesize);
      },
      handleNodeClick(data) {
        this.axios.get("http://localhost:8070/getpyfa?belong="+data.id)
          .then(response => {
            // this.tableData = response.data
            this.tableData = response.data.pyfadata;
            this.totalCount = response.data.number;
          })
        console.log("点击 "+this.$refs.tree.isLeaf+ data.id);
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>

<style scoped>
  .div{ margin:0 auto; width:1000px; height:auto;}
</style>
